<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/Itcast.core.js"></script>
    <script src="./js/itcast.ctor.js"></script>
    <script src="./js/Itcast.dom.js"></script>
    <script>
        Itcast.fn.extend({

            on: function ( eventName, callback ) {
                // 遍历 this. 给每一个 dom 元素都绑定事件
                return this.each(function () {
                    this.addEventListener( eventName, callback );
                });

            }

        })
    </script>
</head>
<body>
    
</body>
<script>
    var data = [

        { name: 'jim1', age: 19, gender: '男' },
        { name: 'jim2', age: 9, gender: '女' },
        { name: 'jim3', age: 29, gender: '女' },
        { name: 'jim4', age: 39, gender: '男' },
        { name: 'jim5', age: 49, gender: '男' },
        { name: 'jim6', age: 59, gender: '女' },
        { name: 'jim7', age: 69, gender: '男' },
        { name: 'jim8', age: 79, gender: '男' }

    ];


    I( '<table border="1" width="400"><tbody>' + I.map( data, function ( item ) {

        return '<tr>' + I.map( item, function ( v, k ) {
            return '<td>' + v + '</td>';
        }).join( '' ) + '</tr>';

    }).join( '' ) + '</tbody></table>' ).appendTo( 'body' );

    I( 'table tr' ).on( 'mouseover', function () {
        this.style.backgroundColor = 'red';
    }).on( 'mouseout', function () {
        this.style.backgroundColor = '';
    });


</script>
</html>















